import React, {useEffect, useState} from "react";
import {withRouter} from "react-router-dom"
function leftnav(props){
    const menulist = [
        {name:"收件箱",icon:"",path:"/view",children:[],showchildren:false},
        {name:"写邮件",icon:"",path:"/add",children:[],showchildren:false},
        {name:"已发送",icon:"",path:"/view",children:[],showchildren:false},
        {name:"已删除",icon:"",path:"/view",children:[],showchildren:false},
        {name:"草稿箱",icon:"",path:"/view",children:[],showchildren:false},
        {name:"收藏",icon:"",path:"/view",children:[],showchildren:false},
        {name:"问卷调查",icon:"",path:"/wenjuan",children:[],showchildren:false},
        {name:"测试",icon:"",path:"/ceshi",children:[],showchildren:false},
    ]
    // 当前激活的菜单
    const [activeIndex,setIindex] = useState(0)
    const childrenhtml = (item)=>{
        return item.children.map(yuansu=>{
            return <div className={item.showchildren?"block":"hidden"} key={yuansu.name}>{yuansu.name}</div>
        })
    }
    useEffect(()=>{
        // 初始化的时候,读取路由，如果匹配到某个菜单，就将这个菜单进行激活，如果没有匹配到，激活第一个菜单
        console.log(props,"找到路由path")
        // 自动跳转
        dianji(0)
    },[])
    // 菜单的点击事件
    const dianji=(index)=>{
        setIindex(index)
        props.history.push({pathname:menulist[index].path + "/" + menulist[index].name})
    }
    return (
        <div className="w-full h-full flex flex-col justify-start items-start overflow-x-hidden overflow-y-auto divide-white">
            {menulist.map((item,index)=>{
                return (
                    <React.Fragment  key={item.name +index.toString()}>
                        <div onClick={()=>dianji(index)} className={["w-full h-10 juzhong hover:bg-blue-200 cursor-pointer select-none flex-shrink-0",activeIndex===index?"bg-blue-200 text-red-500":""].join(" ")}>
                            <span>{item.name}</span>
                        </div>
                        {item.children.length > 0?childrenhtml(item):null}
                    </React.Fragment>
                )
            })}
        </div>
    )
}

export default withRouter(leftnav)